<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body,
        html {
            margin: 0;
        }
        
        body {
            height: 100%;
        }
    </style>
</head>

<body>

</body>
<html>
<script>
    var nav = document.createElement('nav')
    document.body.appendChild(nav)
    
    // 默认背景红色
    document.body.style.backgroundColor = 'red'
    
    nav.style.width = '100%'
    nav.style.height = '40px'
    nav.style.backgroundColor = 'black'
    nav.style.position = 'relative'

    var button1 = document.createElement('input')
    document.body.appendChild(button1);
    button1.style.backgroundColor = 'red'
    button1.style.width = '20px'
    button1.style.height = '20px'
    button1.style.position = 'absolute'
    button1.style.top = '10px'
    button1.style.left = '3px'
    button1.type = 'button'
    // button1.style.border = 'none'

    button1.onclick = function (event) {
        event.preventDefault()
        document.body.style.backgroundColor = 'red'
    }

    var button2 = document.createElement('input')
    document.body.appendChild(button2);
    button2.style.backgroundColor = 'blue'
    button2.style.width = '20px'
    button2.style.height = '20px'
    button2.style.position = 'absolute'
    button2.style.top = '10px'
    button2.style.left = '30px'
    button2.type = 'button'
// button2.style.border = 'none'
    button2.onclick = function (event) {
        event.preventDefault()
        document.body.style.backgroundColor = 'blue'
    }

    var button3 = document.createElement('input')
    document.body.appendChild(button3);
    button3.style.backgroundColor = 'green'
    button3.style.width = '20px'
    button3.style.height = '20px'
    button3.style.position = 'absolute'
    button3.style.top = '10px'
    button3.style.left = '58px'
    button3.type = 'button'
// button3.style.border = 'none'
    button3.onclick = function (event) {
        event.preventDefault()
        document.body.style.backgroundColor = 'green'
    }

    var button4 = document.createElement('input')
    document.body.appendChild(button4);
    button4.style.backgroundColor = 'yellow'
    button4.style.width = '20px'
    button4.style.height = '20px'
    button4.style.position = 'absolute'
    button4.style.top = '10px'
    button4.style.left = '87px'
    button4.type = 'button'
// button4.style.border = 'none'
    button4.onclick = function (event) {
        event.preventDefault()
        document.body.style.backgroundColor = 'yellow'
    }
</script>